import AigcIcon from '@/components/AigcIcon'
import { AigcSystemInfo } from '@/types'
import { Button, Col, Input, Row, Table, message } from 'antd'
import React, { useEffect, useState } from 'react'
import './systeminfo.scss'
import AigcCard from '@/components/AigcCard'
export default function SystemInfo() {
  const [systemInfo, setSysemInfo] = useState<AigcSystemInfo>({
    requestAccessRate: 0,
    quotaReminder: 0
  })
  const [requestAccessRateDisable, setRequestAccessRateDisable] =
    useState<boolean>(true)
  const [quotaReminderDisable, setQuotaReminderDisableDisable] =
    useState<boolean>(true)
  const [systemInfoData, setSystemInfoData] = useState([
    {
      key: '1',
      title: '请求访问速率',
      content: systemInfo.requestAccessRate
    },
    {
      key: '2',
      title: '额度提醒',
      content: systemInfo.quotaReminder
    }
  ])
  useEffect(() => {
    setSystemInfoData((obj) => {
      obj.forEach((item) => {
        if (item.key === '1') {
          item.content = systemInfo.requestAccessRate
        } else {
          item.content = systemInfo.quotaReminder
        }
      })

      return obj
    })
    // console.log('systemInfoData', systemInfoData)
  }, [systemInfo.quotaReminder, systemInfo.requestAccessRate])
  const EditBtnText = (params: { record: any }) => {
    let result = ''
    if (params.record.key === '1') {
      result = requestAccessRateDisable ? '修改' : '取消'
    } else {
      result = quotaReminderDisable ? '修改' : '取消'
    }
    return <span>{result}</span>
  }
  const systemInfoColumns = [
    {
      title: '标题',
      key: 'title',
      dataIndex: 'title',
      width: 120,
      redner: (text: any, record: any) => (
        <div className="w-[120px]">{text}</div>
      )
    },
    {
      title: '内容',
      key: 'content',
      dataIndex: 'content',

      render: (text: any, record: any) => (
        <Row gutter={12}>
          <Col span={6}>
            <Input
              defaultValue={text}
              onChange={(e) => {
                if (record.key === '1') {
                  //  console.log(e)
                  setSysemInfo((obj) => {
                    obj.requestAccessRate = e.target.value
                    return obj
                  })
                } else {
                  setSysemInfo((obj) => {
                    obj.quotaReminder = e.target.value
                    return obj
                  })
                }
              }}
              disabled={
                record.key === '1'
                  ? requestAccessRateDisable
                  : quotaReminderDisable
              }
            />
          </Col>
          <Col>
            <Button
              type="primary"
              onClick={() => {
                if (record.key === '1') {
                  setRequestAccessRateDisable(!requestAccessRateDisable)
                } else {
                  setQuotaReminderDisableDisable(!quotaReminderDisable)
                }
              }}
            >
              <EditBtnText record={record} />
            </Button>
          </Col>
          <Col>
            <Button
              type="primary"
              onClick={() => {
                if (record.key === '1') {
                  message.success('请求访问速率修改成功！')
                } else {
                  message.success('额度提醒保存成功！')
                }
              }}
            >
              保存
            </Button>
          </Col>
        </Row>
      )
    }
  ]

  return (
    <div className="systeminfo">
      <AigcCard>
        <Table
          scroll={{ x: 800 }}
          showHeader={false}
          pagination={false}
          columns={systemInfoColumns}
          dataSource={systemInfoData}
        ></Table>
      </AigcCard>
    </div>
  )
}
